<template>
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <br />
  <br />
  <h1>当前信息为：{{msg}}</h1>
  <button @click="msg += '!'">点我+!</button>
  <br />
  <br />
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j1.salary}}</h2>
  <button type="button" @click="person.name += '-'">修改名字</button>
  <button type="button" @click="person.age++">修改年龄</button>
  <button type="button" @click="person.job.j1.salary++">修改年龄</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, watch, watchEffect } from 'vue'

export default {
  name: 'Demo',
  setup() {
    let sum = ref(10)
    let msg = ref("你好")
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // 监视
    /* watch(sum, (newVal, oldVal) => {
      console.log("sum值变了", newVal, oldVal)
    }, {}) */

    watchEffect(() => {
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log("watchEffect监视的回调开启了")
    })

    // 返回一个对象，暴露给模板使用（常用）
    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>

</style>
